<template>
<div class="forgetThePassword">

  <el-dialog
      width="400px"
      v-if="dialogVisible"
      @click="closeForgetThePassword"
      :modal-append-to-body="false"
      :visible.sync="isForgetThePassword"
      class="el">

    <el-tabs stretch v-model="activeName">
      <el-tab-pane stretch label="忘记密码" name="first">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="账号" prop="name">
            <el-input clearable v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item  label="输入密码" prop="password">
            <el-input  clearable show-password v-model="ruleForm.password"></el-input>
          </el-form-item>
          <el-form-item label="电话号" prop="mobile">
            <el-input clearable v-model="ruleForm.mobile" ></el-input>
          </el-form-item>
          <el-form-item clearable label="验证码">
            <el-input clearable v-model="ruleForm.text" placeholder="请输入验证码" class="verificationCode"></el-input>
            <el-button type="success" class="succes" v-show="show" @click.prevent="getode()">验证码</el-button>
            <el-button type="success" class="succes" v-show="!show">{{count}}</el-button>

          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="submitForm" class="loginBtn">确认更改密码</el-button>
          </el-form-item>
          <div class="login">
            <span @click="sub11">去登陆</span>
          </div>

        </el-form>


      </el-tab-pane>
    </el-tabs>

  </el-dialog>
</div>
</template>

<script>

import {getChangePassword, getForgetVerificationCode} from "@/api/user-api";

export default {
  name: "ForgetThePassword",
  components:{},
  props:{
    isForgetThePassword:Boolean,

  },

  data() {
    return {
      dialogVisible: true,
      activeName: 'first',
      show:true,
      ishows:'',
      count:'',
      //注册信息
      ruleForm: {
        name: '',
        password: '',
        password2: '',
        mobile: '',
        text: '',
      },
      rules: {
        name: [
          { required: true, message: '请输入(4-16位数字字母)用户名', trigger: 'blur' },
          { pattern:  /^[a-zA-Z0-9]{4,16}$/ ,message: '请输入(4-16位数字字母)用户名'}
        ],
        password: [
          { required: true, message: '请输入(4-16位数字字母)密码', trigger: 'blur' },
          { pattern:  /^[a-zA-Z0-9]{4,16}$/, message: '请输入(4-16位数字字母)密码' }
        ],
        mobile: [
          { required: true, message: '目前只支持11位手机号码', trigger: 'blur' },
          { pattern: /^1[34578]\d{9}$/, message: '目前只支持11位手机号码' }
        ],
        code:
            [
              {required: true, message: '目前只支持6位验证码', trigger: 'blur'},
              {pattern: /^\d{6}$/, message: '目前只支持6位验证码'}
            ],
      },


    }
  },
  methods: {
    //去登陆
    sub11(){
      this.$emit("makeLogin",{
        isForgetThePassword:false,
        isShows:true
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //确认修改密码
    submitForm() {
      getChangePassword(this.ruleForm.name,this.ruleForm.password,this.ruleForm.mobile,this.ruleForm.text,).then(res=>{
        console.log(res)
        if(res.code===0){
          this.$message({
            showClose: true,
            message: '恭喜你，密码更改成功',
            type: 'success'
          });
          // this.$router.push({path:''})
        }else{
          this.$message({
            showClose: true,
            message: '更改失败，请重新更改密码',
            type: 'error'
          });
        }
      })
    },
    //传参给子组件自己往父组件
    closeForgetThePassword(){
      this.$emit('closeForgetThePassword',false)
    },
  //  获取验证码和倒计时
    getode(){
      getForgetVerificationCode(this.ruleForm.name,this.ruleForm.mobile).then(res=>{
        console.log(res)
      })
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {

          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
    },
  },
}
</script>

<style scoped lang="less">
//去掉顶部padding
/deep/ .el-dialog__header {
  padding: 0;
}

//input第一个下边距
.input{
  margin-bottom: 10px;
}
//
/deep/ .el-dialog{
  width: 42%;
  //height: 42%;
}
//确定
/deep/.loginBtn{
  text-align: center;
  width: 260px;
  margin-top: 5px;
  background-color: #00cf8c;
}
//验证码的宽
/deep/.verificationCode{
  width: 60%;

}
//去掉顶部padding
/deep/.el-dialog__header{
  padding: 0;
}
//立即注册  忘记密码

.btn{
  display: flex;
  justify-content: space-between;
  color: #999;
  cursor: pointer;
  margin-top: -10px;
}
.succes{
  background-color: #00cf8c;
  margin-left: 20px;
  cursor: pointer;
}
.login{
  text-align: right;
  &:hover span{
    color: #00cf8c;
    cursor: pointer;
  }
}


</style>